<template>
	<view>
		<shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :shareTitle="shareTitle"
			:goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl" @success="shareSuccess">
		</shareImages>
		<view class="button">
			<button type="primary" @click="createsShareImage">下载</button>
			<button :disabled="canvasImages != '' ? false : true" @click="previewHandle">预览海报</button>
			<!-- #ifdef MP-WEIXIN -->
			<button type="warn" :disabled="canvasImages != '' ? false : true" open-type="share">分享给朋友</button>
			<!-- #endif -->
		</view>

	</view>
</template>

<script>
	import shareImages from '@/components/hj-placard/shareImages.vue'
	export default {
		components: {
			shareImages
		},
		props: {
			show: {
				required: true,
				default: false
			}
		},
		data() {
			return {
				canvasImages: '',
				canvasWidth: 375, // 宽度
				canvasHeight: 500, // 高度
				shareTitle: '', // 分享标题
				goodsTitle: '', // 商品宣传标题
				shareImage: '../../static/bg.jpg', // 背景图片
				qrSize: 100, // 二维码大小
				qrUrl: 'https://ext.dcloud.net.cn/plugin?id=5747', // 生成二维码的链接
			}
		},
		methods: {
			// 生成分享图片
			createsShareImage() {
				uni.downloadFile({
					url: this.canvasImages,
					success(res) {
						// 这时会产生一个临时路径，在应用本次启动期间可以正常使用。
						if (res.statusCode == 200) {
							// 需要将图片保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, // 图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
								success(res) {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									})
									// 如果保存成功需要打开查看，请使用以下方法，同时也支持打开文件
									uni.openDocument({
										filePath: res.savedFilePath,
										success(res) {},
										fail(err) {
											uni.showToast({
												title: '手机不支持该文件类型，请安装wps或office应用',
												icon: 'none'
											})
										}
									})
								},
								fail(err) {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									})
								}
							})
						} else {
							uni.showToast({
								title: '下载失败,请稍后再试',
								icon: 'none'
							})
						}
					},
					fail(err) {
						uni.showToast({
							title: '下载失败,请稍后再试',
							icon: 'none'
						})
					}
				})

			},
			// 预览图片
			previewHandle() {
				console.log(this.canvasImages);
				uni.previewImage({
					urls: [this.canvasImages],
				});
			},
			// 回调图片地址
			shareSuccess(e) {
				// console.log('地址',e)
				this.canvasImages = e
			},
			// 分享
			onShareAppMessage(res) {
				// if (res.from === 'button') {
				// 	console.log(res.target)
				// }
				return {
					title: 'canvas图片分享',
					path: this.canvasImages
				}
			}
		},
		watch: {
			show: {
				handler(show) {
					console.log(show, 'show');
				}
			}
		},
		mounted() {
			this.$refs.canvas.canvasCreate();
		}
	}
</script>

<style scoped>
	.button {
		display: flex;
	}
</style>